<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS定位</title>
    <style>
        /* 1.绝对定位：定位原点是和父元素有关的 （父元素也要定位） 会脱离文档流 absolute */
        /* position: absolute; top right bottom left */
        /* .f{
            width: 300px;
            height: 300px;
            background-color: lightblue;
            position: absolute;
            top:200px;
            left: 100px;
        }
        .s{
            width: 100px;
            height: 100px;
            background-color: olive;
            position: absolute;
            top: 100px;
            left: 100px;
        } */
        
        /* 2.相对定位  相对的是原来的自己，表现是浮动的，但是原来的位置依然占领 relative */
        /* position: relative; top right bottom left */
        #d2{
            width: 200px;
            height: 200px;
            background-color: lightcoral;
            position: relative;
            left: 100px;
            top: 100px;
        }

        /* 3.固定定位  将位子固定死  fixed */
        /* position: fixed; top right bottom left*/
        /* transparent 根据父元素设置 */
        #d3{
            width: 50px;
            height: 200px;
            background-color: orange ;

            /* 透明度 0~1 越来越清晰 */
            opacity: 0.5;

            position: fixed;
            bottom: 5px;
            right: 0px;
            /* 文本的水平居中 */
            text-align: center;
            /* 竖直居中 */
            line-height: 50px;
        }

    </style>
</head>
<body>
    <!-- 顶部的锚点 -->
    <a name="top"></a>
    <div class="f">
        <div class="s"></div>
    </div>
    <div id="d2"></div>
    
    <img src="../img/paris.jpg" /><br/>
    <img src="../img/paris.jpg" /><br/>
    <img src="../img/paris.jpg" /><br/>
    <img src="../img/paris.jpg" /><br/>
    <img src="../img/paris.jpg" /><br/>
    <img src="../img/paris.jpg" /><br/>
    <img src="../img/paris.jpg" /><br/>

    <div id="d3"><a href="#top">回<br/>到<br/>顶<br/>部</a></div>
</body>
</html>